<template>
  <div class="editWrepper">
    <div
      class="editComponent"
      v-for="(item, index) in $store.state.save.saveList"
      :key="index"
    >
      <h6 class="editTitle">{{ item.title }}</h6>
      <div class="editOther">
        <p class="editDate">{{ saveData }}</p>
        <div class="icon">
          <span class="iconfont el-icon-edit" @click="handleEidt(item)"></span>
          <span
            class="iconfont el-icon-delete"
            @click="handleDelete(index)"
          ></span>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      saveData: "",
    };
  },
  created() {
    this.nowSaveDate();
  },

  methods: {
    // 封装一个保存草稿时间
    nowSaveDate() {
      var aData = new Date();
      console.log(aData); 
      this.saveData =
        aData.getFullYear() + "-" + (aData.getMonth() + 1) +  "-" +aData.getDate();
      // console.log(this.saveData); //2020-10-25
    },

    //  删除草稿
    handleDelete(index) {
      console.log("删除草稿")  
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
          this.$store.commit("save/handleDelete", index)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },

    // 编辑
    handleEidt(item){
      this.$emit('editPost',item)
    }
  },
};
</script>

<style lang="less" scoped>
.editWrepper {
  margin: 12px 0;
  .editComponent {
    margin: 6px 0;
    .editTitle {
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      font-weight: 400;
      font-size: 14px;
      &:hover {
        cursor: pointer;
        color: #ffa500;
      }
    }
    .editOther {
      display: flex;
      justify-content: space-between;
      padding: 3px 0;
      .editDate {
        margin-right: 80px;
        color: #999999;
        font-size: 14px;
      }
      .icon {
        cursor: pointer;
      }
    }
  }
}
</style>